// 重点
// 1.div设置id/class/ref；设置画布width，height（css样式）
// 2.let chartDom = document.getElementById('lineDemo') 获取dom节点
// 2.let myChart = this.$echarts.init(chartDom) 初始化echarts实例
// 3.myChart.setOption(this.option) 写入echarts配置项 详情见官网配置文档

<template>
    <div class="container">
      <h1>{{ title }}</h1>
      <div class="echart" id="lineDemo" ref="chart"></div>
    </div>
    <A></A>
</template>

<script>
import A from '../components/A.vue'
export default {
  name: 'index',
  components: {
    A: A
  },
  data () {
    return {
      title: 'echarts-demo',
      option: {
        title: {
          text: '某站点用户访问来源',
          top: '5%',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: '15%',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {c}'
                },
                labelLine: {show: true}
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    let chartDom = document.getElementById('lineDemo')
    let myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {},
  watch: {},
  created () {
  }
}
</script>
